<script setup>
    import {ref} from "vue";
    import AddPP from "@/views/FM/components/AddPP.vue";
    import EditePP from "@/views/FM/components/EditePP.vue";
    let pinpaiList = ref([
      {
        id: '1',
        name: 'iphone手机',
        num:10,
        order:2,
        state:"正常",
        date:"2024-07-12 13:34:26"
      },
      {
        id: '2',
        name: '华为',
        num:2,
        order:1,
        state:"正常",
        date:"2024-07-12 14:34:26"
      },
    ]);

    const currentPage = ref(5);
    const pageSize = ref(10);
    let total = ref(100);
    let dialogFormVisible = ref(false);
    //记录用户点击的按钮是添加还是编辑
    let kind = ref("add");
    //存储编辑按钮点击时对应的数据源
    let data = ref(null);

    function handleCurrentChange(val){
        alert(val);
    }
    function handleSizeChange(val){
      alert(val);
    }

  //定义事件绑定添加按钮
  function addPP(){
      dialogFormVisible.value = true;
      kind.value = "add";
  }
  function editeAction(row){
      dialogFormVisible.value = true;
      kind.value = "edite";
      data.value = row;
  }

  function addFormData(form){
      pinpaiList.value.push(form);
      dialogFormVisible.value = false;
  }
  function editeFormData(form){
      //查找需要更新的数据下标
      for(let i = 0; i < pinpaiList.value.length; i++){
         if(pinpaiList.value[i].id == form.id){
             //替换该数据
             pinpaiList.value.splice(i, 1, form);
             break;
         }
      }
      dialogFormVisible.value = false;
  }
</script>

<template>
   <div class="pp-page">
     <el-row>
       <el-col :span="4">
         <h3 class="pp-title">品牌管理</h3>
       </el-col>
       <el-col :span="4" :offset="16" style="text-align: right;">
         <el-button type="primary" size="small" @click="addPP">添加</el-button>
       </el-col>
       <el-col :span="24" style="margin-top: 15px;border-top: 1px solid #f2f2f2; padding: 15px 0;">
         <el-row style="align-items: center;font-size: 14px;">
           <el-col :span="2" style="color: #999;padding-left: 10px;">品牌名称：</el-col>
           <el-col :span="4">
             <el-input></el-input>
           </el-col>
           <el-col :span="2" style="color: #999; padding-left: 10px;">品牌状态：</el-col>
           <el-col :span="4">
             <el-input></el-input>
           </el-col>
           <el-col :span="2" style="text-align: center">
             <el-button type="primary" size="small">查询</el-button>
           </el-col>
           <el-col :span="2">
             <el-button type="default" size="small">重置</el-button>
           </el-col>
         </el-row>
         <el-row style="margin-top: 20px;">
           <el-col :span="24">
             <el-table :data="pinpaiList" style="width: 100%">
               <el-table-column prop="id" label="序号"  width="60"/>
               <el-table-column prop="name" label="名称" />
               <el-table-column prop="num" label="商品数量" />
               <el-table-column prop="order" label="排序"  />
               <el-table-column prop="state" label="状态">
                   <template #default="scope">
                       <span :class="{normal: scope.row.state == '正常', disable:scope.row.state != '正常'}">{{scope.row.state}}</span>
                   </template>
               </el-table-column>
               <el-table-column prop="date" label="创建时间"  />
               <el-table-column label="操作列表" width="200">
                    <template #default="scope">
                        <el-button type="info" size="small">停用</el-button>
                        <el-button type="warning" size="small" @click="editeAction(scope.row)">编辑</el-button>
                        <el-button type="danger" size="small">删除</el-button>
                    </template>
               </el-table-column>
             </el-table>
           </el-col>
           <el-col :span="24" style="display: flex;justify-content: flex-end;padding-top: 20px;">
             <el-pagination
                 v-model:current-page="currentPage"
                 v-model:page-size="pageSize"
                 :page-sizes="[10, 20, 30, 40]"
                 :size="size"
                 :disabled="disabled"
                 :background="background"
                 layout="total, sizes, prev, pager, next, jumper"
                 :total="total"
                 @size-change="handleSizeChange"
                 @current-change="handleCurrentChange"
             />
           </el-col>
         </el-row>
       </el-col>
     </el-row>
    <!--  设置对话框  -->
     <el-dialog v-model="dialogFormVisible" :title="kind == 'add' ? '新增品牌':'修改品牌'" width="500">
          <AddPP v-if="kind == 'add'" @addValue="addFormData"></AddPP>
          <EditePP :data="data" @editeValue="editeFormData" v-else></EditePP>
     </el-dialog>
   </div>
</template>

<style scoped lang="less">
    .pp-page {
      background-color: #fff;
      padding: 20px;
      min-height: 100%;

      .pp-title {
        font-size: 16px;
        color: #555;
      }
      .normal {
         color: #409EFF;
      }
      .disable {
        color:#C0C4CC;
      }
    }
</style>